<template>
	<view class="app">
		<!-- 图片模糊 -->
		<view class="bg-dim">
			<!-- <image src="" mode=""></image> -->
		</view>
		<view class="transt-top">
		<!-- 头像信息 -->
		<view class="user-info">
			<view class="top-img">
				<image :src="sysset.pic" mode=""></image>
			</view>
				<!-- 内容 -->
					<view class="top-conten">
						<view class="top-card">
							<view class="title">
								{{title}}
							</view>
							<!-- 人数 -->
							<view class="read-num" style="font-size: 24rpx;color: #7d7d7d;">
								<uni-icons type="person" size="18"></uni-icons>23
							</view>
						</view>
						<!-- 介绍 -->
						<view class="include">
							<text>群介绍：</text>
							<text>{{brief}}</text>
							<text class="more">更多></text>
						</view>
						<view class="map">
							群地图
						</view>
					</view>
				</view>
				<!-- 动态数据 -->
				<view class="send-type">
					<view :class="type_index==index?'pitch':'type-conten'" @click="changType(item.vlaue,index)" v-for="(item,index) in type">
						{{item.name}}
					</view>
				</view>
				<view class="data-card" v-if="groupList.length>0">
					<!-- 暂无数据 -->
					<!-- <view class="zore-data" v-if="1">
						<image src="../../admin/images/msg-pic.png" mode=""></image>
					</view> -->
					<view class="data-list"  v-for="(item,index) in groupList" @click="navGoDetail(item.id)">
						<view class="user-trends">
							<!-- 头像信息 -->
							<view class="user-trends-top">
								<view class="trends-top-img">
									<image :src="item.headimg" mode=""></image>
								</view>
								<view class="trends-user-info">
									<view class="user-name">
										<view>{{item.nickname}}</view>
										<view class="ziyuan" v-if="item.type==1">
											资源
										</view>
										<view class="ziyuan" v-else>
											需求
										</view>
									</view>
									<view class="send-time">
										<!-- 2022/02/2 15:23 -->
										{{item.showtime}}
									</view>
								</view>
							</view>
							<!-- 内容 -->
							<view class="send-trends-conten">
								<view class="title-conten">
									{{item.content}}
								</view>
								<view class="image-conten">
									<view class="image-list" v-for="(items,index) in item.pics">
										<!-- {{items}} -->
										<image :src="items" @tap="previewImage" :data-url="items" mode=""></image>
									</view>
								</view>
							</view>
							<!-- 点赞 -->
							<view class="operate">
								<view class="operate-detile"  @click.stop="isNozan(index)">
									<uni-icons type="hand-down" color="#9f9f9f" size="18"></uni-icons>
									<text>没有价值{{item.nozan}}</text>
								</view>
								<view class="operate-detile"  @tap.stop="zan" :data-id="item.id" :data-index="index">
									<uni-icons type="hand-up"color="#9f9f9f" size="18"></uni-icons>
									<text>靠谱{{item.zan>999?'999+':item.zan}}</text>
								</view>
								<view class="operate-detile">
									<uni-icons type="chat"color="#9f9f9f" size="18"></uni-icons>
									<text>评论{{0}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		
		<view class="send-btn" @click="nagoSend">
			发布群动态
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				pagenum:1,
				type:[
					{
						name:"全部",
						value:0
					},
					{
					name:"资源",
					value:1
				},
				{
					name:"需求",
					value:2
				}],
				type_index:0,
				groupList:[],
				pinkData:[],
				cid:null,
				pagenum:1,
				sysset:null,
				title:"",
				brief:''
			}
		},
		onShow() {
		  wx.onAppRoute((res)=> {
			  // console.log(res)
		    if (res.openType === 'navigateBack') {
		      // 在这里编写返回事件的逻辑处理
			  this.cid = res.query.cid;
			  this.brief = res.query.brief;
			  this.getIDInitData();
		    }
		  })
		},
		onUnload() {
		  // 取消监听页面切换事件的监听
		  wx.offAppRoute()
		},
		onLoad(e) {
			// console.log(e)
			// this.getInitData()
			this.cid = e.cid;
			this.brief = e.brief;
			this.getIDInitData();
		},
		methods: {
			navGoDetail(id){
				uni.navigateTo({
					url:"../trendsDetail/trendsDetail?id="+id
				})
			},
			nagoSend(){
				uni.navigateTo({
					url:"../sendTrends/sendTrends"
				})
			},
			zan(e){
			var that = this;
			var id = e.currentTarget.dataset.id;
			var index = e.currentTarget.dataset.index;
			var datalist = that.groupList;
			app.post("ApiLuntan/zan", {id: id}, function (res) {
			  if (res.type == 0) {
			    //取消点赞
			    datalist[index].iszan = 0;
			    datalist[index].zan = datalist[index].zan - 1;
			  } else {
			    datalist[index].iszan = 1;
			    datalist[index].zan = datalist[index].zan + 1;
			  }
			  that.groupList = datalist;
			});
			},
			isNozan(index){
				console.log(this.groupList[index].id)
				app.post("ApiLuntan/nozan",{id:this.groupList[index].id},(res)=>{
					console.log(res)
				})
			},
			getIDInitData(){
				let that = this;
				app.post('ApiLuntan/ltlist', {cid: that.cid,pagenum: this.pagenum,keyword:""},(res)=> {
				  // that.loading = false;
				  // that.loaddingmore = false;
				  var data = res.datalist;
				  // console.log(res)
				  if (this.pagenum == 1) {
									uni.setNavigationBarTitle({
										title: res.title
									});
									that.pernum = res.pernum;
									that.groupList = res.datalist;
									that.sysset = res.sysset;
									that.banner = res.banner;
									that.title = res.title;
				    if (data.length == 0) {
				      that.nodata = true;
				    }
									// that.loaded();
				  }else{
				    if (data.length == 0) {
				      that.nomore = true;
				    } else {
				      var datalist = that.datalist;
				      var newdata = datalist.concat(data);
				      that.groupList = newdata;
				    }
				  }
				  this.getPinkData()
				});
			},
			getInitData(){
				app.post('ApiLuntan/index', {pagenum: this.pagenum},(res)=> {
					// console.log(res)
					this.groupList = res.datalist
				})
			},
			getPinkData(){
				this.pinkData = [];
				if(this.type[this.type_index].value!=0){
						// this.pinkData = this.pinkData.concat(this.groupList)
					for(let i=0;i<this.groupList.length;i++){
						if(this.groupList[i].type==this.type[this.type_index].value){
							this.pinkData.push(this.groupList[i])
						}
					}
				}else{
					this.pinkData = this.groupList
				}
				
			},
			changType(item,index){
				this.type_index = index;
				this.groupList = this.type[index].value;
				this.groupList = [];
				this.getIDInitData();
			}
		}
	}
</script>

<style scoped lang="less">
	.bg-dim{
		width: 100%;
		height: 250rpx;
		background-color: #00A0E9;
	}
	.transt-top{
		position: relative;
		top: -50rpx;
		transform: translateY(-50rpx);
	}
	.user-info{
		width: 95%;
		background-color: #FFFFFF;
		position: relative;
		height: 200rpx;
		padding: 15rpx;
		border-radius: 15rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.top-img{
			background-color: #007AFF;
			height: 160rpx;
			width: 23%;
			border-radius: 25rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 25rpx;
			}
		}
		.top-conten{
			width: 75%;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top-card{
				display: flex;
				justify-content: space-between;
				.title{
					font-size: 35rpx;
					font-weight: initial;
				}
			}
			.include{
				text{
					margin-right: 2%;
					font-size: 24rpx;
					color: #838384;
				}
				.more{
					color: #994275;
				}
				
			}
			.map{
				width: 150rpx;
				height: 45rpx;
				font-size: 25rpx;
				border-radius: 60rpx;
				background-color: #994275;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				align-self: flex-end;

			}
		}
	}
.send-type{
		margin:3% 0;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.type-conten{
			width: 28%;
			height: 70rpx;
			background-color: #FFFFFF;
			color: #000000;
			font-family: "微软雅黑";
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 70rpx;
			margin: 1% 2.6%;
		}
		.pitch{
			width: 28%;
			height: 70rpx;
			margin: 1% 2.6%;
			border-radius: 70rpx;
			background-color: #994275;
			font-family: "微软雅黑";
			font-weight: 600;
			color: #FFFFFF;
			display: flex;
			font-weight: 600;
			justify-content: center;
			align-items: center;
		}
	}
	// 内容
	.data-card{
		margin-bottom: 140rpx;
	}
	.user-trends{
		width: 94%;
		min-height: 15vh;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 2% auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 15rpx;
		.user-trends-top{
			display: flex;
			.trends-top-img{
				width: 100rpx;
				height: 100rpx;
				image{
					witdh:100%;
					height: 100%;
					border-radius: 100%;
				}
			}
			.trends-user-info{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 80%;
				margin-left:2%;
				.user-name{
					font-family: "微软雅黑";
					font-weight: 600;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					.ziyuan{
						width: 60rpx;
						height: 38rpx;
						background-color: #994275;
						font-size: 18rpx;
						margin-left: 5%;
						color: #FFFFFF;
						border-radius: 15rpx 15rpx 15rpx 0rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				.send-time{
					font-size: 24rpx;
					color: #cecece;
				}
			}
		}
		.send-trends-conten{
			.title-conten{
				margin: 2% 0;
			}
			.image-conten{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				.image-list{
					width: 30%;
					height: 180rpx;
					// background-color: #00BFFF;
					margin: 2% 1.6%;
					border-radius: 15rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 15rpx;
					}
				}
			}
		}
		.operate{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.operate-detile{
				font-size: 25rpx;
				color: #9f9f9f;
				display: flex;
				align-items: center;
				text{
					margin-left: 10rpx;
				}
			}
		}
	}
 .send-btn{
	 position: fixed;
	 bottom: 3%;
	 width: 95%;
	 height: 80rpx;
	 color: #FFFFFF;
	 background-color: #994275;
	 border-radius: 80rpx;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 // font-size: 1rem;
	 left: 50%;
	 transform: translateX(-50%);
 }
</style>
